import React, {Component} from 'react';
import {StyleSheet, ScrollView, Text, View, TouchableOpacity, Alert, FlatList, RefreshControl, ActivityIndicator} from 'react-native';
import {List, Tabs, WingBlank, Flex, Toast, Modal, PickerView, Button} from '@ant-design/react-native';
import {getOwnerStatistics} from '~/api/company';

const renderContent = (tab, index) => {
    const style = {
        paddingVertical: 40,
        justifyContent: 'center',
        alignItems: 'center',
        margin: 10,
        backgroundColor: '#ddd',
    };
};
let pagecount = 0;
let index = 1;
let size = 10;
class MyOwner extends React.Component {
    static navigationOptions = {
        title: '我的业主',
    };

    constructor(porps) {
        //调用基类的所有的初始化方法
        super(porps);
        // 设置当前组件的属性
        this.state = {
            list: [],
            tabvalue: 0,
            index: 1,
            // tabs: [
            //     {title: '全部业主', value: 1},
            //     {title: '已购车位业主', value: 2},
            //     {title: '已收藏业主', value: 3},
            // ],
            page_index: 1,
            page_size: 10,
            isLoading: false, //加载
            refreshing: false,
            footer: 0, //上拉底部显示
            value: undefined,
            visible: false,
            buildlist: [],
            buildId: this.props.navigation.getParam('buildId'),
            buildName: '',
            totalcount: 0,
        };
        this.GetList();
        this.onClose = () => {
            this.setState(
                {
                    visible: false,
                },
                () => {
                    this.GetList();
                },
            );
        };
    }
    GetList() {
        getOwnerStatistics({
            page_index: this.state.page_index,
            page_size: this.state.page_size,
            condidate: {
                buildingId: this.state.buildId,
            },
        }).then((r) => {
            console.log(r.data.list);
            if (r.code === 0) {
                this.setState({
                    list: r.data.list,
                    totalcount: r.data.total_item_count,
                    footer: 0,
                });
                if (this.state.page_index === 1) {
                    pagecount = r.data.total_page_count;
                    this.setState({
                        footer: r.data.total_item_count < 10 ? 2 : 0,
                    });
                }
            }
        });
    }
    _onRefresh() {
        this.setState({footer: 0, page_index: index, page_size: size}, () => {
            this.GetList();
        });
    }
    //上拉加载更多
    loadData = () => {
        this.setState({isLoading: false});
        let dataArray = [];
        if (pagecount - 1 > 0) {
            pagecount = pagecount - 1;
            this.setState(
                {
                    page_index: this.state.page_index + 1,
                    footer: 1,
                },
                () => {
                    getOwnerStatistics({
                        page_index: this.state.page_index,
                        page_size: this.state.page_size,
                        condidate: {
                            buildingId: this.state.buildId,
                        },
                    }).then((r) => {
                        dataArray = r.data.list;
                        dataArray = this.state.list.concat(dataArray);
                        if (r.code === 0) {
                            this.setState({
                                list: dataArray,
                                isLoading: false,
                            });
                        }
                    });
                },
            );
        } else {
            this.setState({
                footer: 2,
            });
        }
    };

    //上拉底部显示
    genIndicator() {
        if (this.state.footer === 1) {
            return (
                <View style={styles.indicatorContainer}>
                    <ActivityIndicator style={styles.indicator} size={'large'} animating={true} />
                    <Text style={{textAlign: 'center'}}>正在加载更多</Text>
                </View>
            );
        } else if (this.state.footer === 2) {
            return (
                <View
                    style={{
                        height: 30,
                        alignItems: 'center',
                        justifyContent: 'flex-start',
                    }}>
                    <Text
                        style={{
                            color: '#999999',
                            fontSize: 14,
                            marginTop: 5,
                            marginBottom: 5,
                        }}>
                        没有更多数据了
                    </Text>
                </View>
            );
        } else if (this.state.footer === 0) {
            return (
                <View
                    style={{
                        height: 30,
                        alignItems: 'center',
                        justifyContent: 'flex-start',
                    }}>
                    <Text
                        style={{
                            color: '#999999',
                            fontSize: 14,
                            marginTop: 5,
                            marginBottom: 5,
                        }}>
                        上拉加载更多
                    </Text>
                </View>
            );
        }
    }
    _renderItem(item) {
        return (
            <WingBlank
                style={{
                    backgroundColor: 'white',
                    marginTop: 10,
                    borderRadius: 10,
                }}>
                <Flex
                    // onPress={() => {
                    //     this.props.navigation.push('MyOwnerInfo', {
                    //         // buildid: this.state.buildId,
                    //         // buildName: this.state.buildName,
                    //         reguserid: item.UserDataID,
                    //         datatime: '2020-08-09',
                    //         type: 1, //1浏览 2销售 3收藏
                    //     });
                    // }}  // onPress={() => {
                    //     this.props.navigation.push('MyOwnerInfo', {
                    //         // buildid: this.state.buildId,
                    //         // buildName: this.state.buildName,
                    //         reguserid: item.UserDataID,
                    //         datatime: '2020-08-09',
                    //         type: 1, //1浏览 2销售 3收藏
                    //     });
                    // }}
                    direction={'column'}
                    style={{
                        width: '100%',
                        paddingTop: '3%',
                        paddingBottom: 10,
                    }}>
                    <Flex
                        style={{
                            width: '100%',
                            paddingLeft: 15,
                            paddingRight: 15,
                            paddingTop: 9,
                        }}
                        justify={'between'}>
                        <Text
                            style={{
                                fontSize: 15,
                                color: '#333333',
                                fontWeight: 'bold',
                            }}>
                            姓名：
                            <Text style={{color: '#000000'}}>{item.HouseOwner}</Text>
                        </Text>
                        <Text
                            style={{
                                fontSize: 15,
                                color: '#333333',
                                fontWeight: 'bold',
                            }}>
                            房号：
                            <Text style={{color: '#000000'}}>{item.HouseNo}</Text>
                        </Text>
                        <Text
                            style={{
                                color: '#666666',
                            }}>
                            {item.Mobile}
                        </Text>
                    </Flex>
                    <View style={{width: '100%', height: 1, backgroundColor: '#EEEEEE', marginTop: 10}} />
                    <Flex
                        style={{
                            width: '100%',
                            paddingLeft: 15,
                            paddingRight: 15,
                            paddingTop: 9,
                        }}
                        justify={'between'}>
                        <Flex
                            onPress={() => {
                                this.props.navigation.push('MyCollection', {userid: item.UserDataID, companyBuildingID: this.state.buildId});
                            }}
                            direction="column"
                            style={{flex: 1}}>
                            <Text style={{color: '#1ca2ff', fontSize: 16}}>{item.FavoriteCount}</Text>
                            <Text
                                style={{
                                    fontSize: 12,
                                    color: '#666666',
                                }}>
                                收藏量
                            </Text>
                        </Flex>
                        <Flex
                            onPress={() => {
                                this.props.navigation.push('SaleOrder', {
                                    userid: item.UserDataID,
                                    params: 0,
                                    companyBuildingID: this.state.buildId,
                                });
                            }}
                            direction="column"
                            style={{flex: 1}}>
                            <Text
                                style={{
                                    fontSize: 16,
                                    color: '#1ca2ff',
                                }}>
                                {item.OrderCount}
                            </Text>
                            <Text style={{fontSize: 12, color: '#666666'}}>购买量</Text>
                        </Flex>
                        <Flex
                            onPress={() => {
                                this.props.navigation.push('Myfootprint', {userid: item.UserDataID, companyBuildingID: this.state.buildId});
                            }}
                            direction="column"
                            style={{flex: 1}}>
                            <Text
                                style={{
                                    fontSize: 16,
                                    color: '#1ca2ff',
                                }}>
                                {item.ViewCount}
                            </Text>
                            <Text style={{fontSize: 12, color: '#666666'}}>浏览量</Text>
                        </Flex>
                    </Flex>
                </Flex>
            </WingBlank>
        );
    }
    _HeaderView = () => {
        return (
            <WingBlank>
                <Flex justify={'between'} style={{marginTop: 10}}>
                    {this.state.totalcount > 0 && <Text>总数量：{this.state.totalcount}</Text>}
                </Flex>
            </WingBlank>
        );
    };
    render() {
        return (
            <View style={{flex: 1}}>
                <FlatList
                    data={this.state.list}
                    style={{width: '100%'}}
                    showsVerticalScrollIndicator={false}
                    renderItem={(data) => this._renderItem(data.item)}
                    keyExtractor={(item, index) => index}
                    ListHeaderComponent={this._HeaderView}
                    ListFooterComponent={() => this.genIndicator()} //上拉加载更多视图
                    onEndReached={() => {
                        this.loadData();
                    }}
                    onEndReachedThreshold={0.1} // 这个属性的意思是 当滑动到距离列表内容底部不足 0.1*列表内容高度时触发onEndReached函数 为啥要加这个属性 因为不加的话滑动一点点就会立即触发onReached函数，看不到菊花加载中
                    refreshing={true}
                    refreshControl={
                        <RefreshControl
                            refreshing={this.state.refreshing}
                            onRefresh={() => {
                                this._onRefresh();
                            }}
                        />
                    }
                />
            </View>
        );
    }
}

const styles = StyleSheet.create({});

export default MyOwner;
